<script setup lang="ts">
defineOptions({
  name: "MainProgress"
});
import { ref, reactive, onMounted, computed, markRaw, provide } from "vue";
import { queryMainStatus } from "@/api/modules/operation";
import mainProgressStatus from "@/views/electricity/operation/overview/components/mainProgressStatus.vue";
import modelBox from "@/views/common/components/modelBox/index.vue";

interface Props {
  data?: Array<any> | null;
  dark?: boolean;
}
// 市政进线状态
const mainProgressStatusRef = ref<InstanceType<typeof mainProgressStatus> | null>(null);
const mainProgressStatusData = reactive<Array<any>>([]);
const mainStatusInit = async () => {
  mainProgressStatusData.splice(0);
  const params = { classCode: "ELECTRICTITY" };
  const res = await queryMainStatus(params, () => mainProgressStatusRef.value.loadingInstance.close());
  if (res?.length) {
    mainProgressStatusData.push(...res);
  }
};
onMounted(() => {
  mainProgressStatusRef.value.initLoading();
  mainStatusInit().then(() => {
    mainProgressStatusRef.value.loadingInstance.close();
  });
});
</script>

<template>
  <modelBox title="市政进线状态">
    <mainProgressStatus ref="mainProgressStatusRef" :data="mainProgressStatusData" />
  </modelBox>
</template>

<!-- <style lang="scss" scoped>
.main-progres-status-content {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  height: 100%;

  .content-item {
    flex: 1;
    min-width: 10%;
    height: 100%;
  }
}
</style> -->
